<template>
	<el-card>
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="200px" @keyup.enter="handleDataForm()">
			<!-- <el-form-item :label="$t('profile.username')">
				<span>{{ store.userStore.user.username }}</span>
			</el-form-item> -->
			<el-form-item prop="strator_nickname" label="昵称">
				<el-input v-model="dataForm.strator_nickname" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item prop="strator_avatar" label="头像">
				<div class="w100">
                    <div class="w0 h0 opa0 ovh"><el-input v-model="dataForm.strator_avatar" maxlength="20"></el-input></div>
                    <div>
                        <AUploadSingle v-model="dataForm.strator_avatar" />
                    </div>
                </div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleDataForm" :loading="loading">{{ $t('confirm') }}</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script setup lang="ts" name="ProfilePassword">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import store from '@/store'
import { useI18n } from 'vue-i18n'
import { validatePassword } from '@/utils/validate'
import { useUserAddApi } from '@/api/user'
import { ElMessage } from 'element-plus'
import { closeTab } from '@/utils/tabs'
import AUploadSingle from "@/components/AUploadSingle.vue";

const router = useRouter()
const route = useRoute()
const { t } = useI18n()
const dataFormRef: any = ref(null)
const loading = ref(false);
const fileTest = ref([]);

const dataForm = ref({
	strator_nickname: '',
	strator_avatar: '',
})
const dataRules = ref({
	strator_nickname: [{ required: true, message: t('required'), trigger: 'blur' }],
	strator_avatar: [{ required: true, message: t('required'), trigger: 'change' }],
})
onMounted(() => {
    dataForm.value.strator_nickname = store.userStore.user.username;
    if (store.userStore.user.avatar) {
        dataForm.value.strator_avatar = store.userStore.user.avatar
    }
})

const handleDataForm = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
        loading.value = true;
        const userinfostr: any = localStorage.getItem('userinfo');
        const userinfo = userinfostr ? JSON.parse(userinfostr) : {};
        const params = {
            id: userinfo.id,
            strator_account: userinfo.strator_account,
            strator_mobile: userinfo.strator_mobile,
            strator_nickname: dataForm.value.strator_nickname,
        }
        if (dataForm.value.strator_avatar) {
            params.strator_avatar = dataForm.value.strator_avatar
        }
		useUserAddApi(params).then(() => {
            loading.value = false;
			ElMessage.success('修改成功');
            userinfo.strator_nickname = dataForm.value.strator_nickname;
            localStorage.setItem('userinfo', JSON.stringify(userinfo));
            store.userStore.getUserInfoAction();
		}).catch(() => {
            loading.value = false;
        })
	})
}
</script>
